<template>
  <div class="app-container" style="background-color:#ecf0f5 !important">
    <!-- v-permission="['airExponent:airExponentYear:read']" -->
    <!-- 查询和其他操作 -->
    <div class="filter-container" style="background-color:#ecf0f5 !important">
      <el-date-picker
        v-model="year"
        type="year"
        clearable
        class="filter-item"
        placeholder="选择年"
        style="width:204px"
      />
     <span v-if="this.$store.state.user.fsiteLevel == '0'">
        <el-select
          clearable
          filterable
          @change="cityChange"
          class="filter-item"
          v-model="cityValue"
          placeholder="请选择市"
        >
          <el-option
            v-for="item in cityOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          filterable
          @change="areaChange"
          class="filter-item"
          v-model="areaValue"
          placeholder="请选择区"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          filterable
          @change="schoolChange"
          class="filter-item"
          v-model="schoolValue"
          placeholder="请选择学校"
        >
          <el-option
            v-for="item in schoolOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </span>
       <span v-if="this.$store.state.user.fsiteLevel == '1'">
          <el-select
          disabled
          clearable
          filterable
          @change="cityChange"
          class="filter-item"
          v-model="cityValue"
          placeholder="请选择市"
        >
          <el-option
            v-for="item in cityOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          filterable
          @change="areaChange"
          class="filter-item"
          v-model="areaValue"
          placeholder="请选择区"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          filterable
          @change="schoolChange"
          class="filter-item"
          v-model="schoolValue"
          placeholder="请选择学校"
        >
          <el-option
            v-for="item in schoolOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </span>
       <span v-if="this.$store.state.user.fsiteLevel == '2'">
          <el-select
          disabled
          clearable
          filterable
          @change="areaChange"
          class="filter-item"
          v-model="areaValue"
          placeholder="请选择区"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          clearable
          filterable
          @change="schoolChange"
          class="filter-item"
          v-model="schoolValue"
          placeholder="请选择学校"
        >
          <el-option
            v-for="item in schoolOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </span>
       <span v-if="this.$store.state.user.fsiteLevel == '3'">
        <el-select
           disabled
          clearable
          filterable
          @change="schoolChange"
          class="filter-item"
          v-model="schoolValue"
          placeholder="请选择学校"
        >
          <el-option
            v-for="item in schoolOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </span>
      <el-select
        clearable
        filterable
        class="filter-item"
        v-model="placeValue"
        placeholder="请选择地点"
      >
        <el-option
          v-for="item in placeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        class="filter-item"
        :style="{background:buttonColor.lookup,color:buttonColor.color}"
        icon="el-icon-search"
        @click="handleFilter"
        >查找</el-button
      >
    </div>
    <div class="list">
      <div class="uni-flex uni-row off" style="min-height: 2rem">
        <div class="text1Title">指标</div>
        <div class="text2Title">年浓度</div>
        <div class="text2Title">年平均</div>
        <div class="text2Title">环比浓度</div>
        <div class="text2Title">环比%</div>
        <div class="text2Title">同比浓度</div>
        <div class="text2Title">同比%</div>
      </div>
      <div
        v-for="(item) in dataList"
        :key="item.fsiteNo"
        class="uni-flex uni-row on"
      >
        <div class="text1">{{ item.fitemName }}</div>
        <div class="text2">{{ item.fitemRange }}</div>
        <div class="text2">{{ item.fitemValue }}</div>
        <div class="text2">{{ item.fhbValue }}</div>
        <div class="text2">{{ item.fhbRate }}</div>
        <div class="text2">{{ item.ftbValue }}</div>
        <div class="text2">{{ item.ftbRate }}</div>
      </div>
    </div>

     <div>
      <div id="myChartairExponentYear" :style="{width: '100%', height: '250px',backgroundColor:'#fff'}" />
    </div>
    <div>
      <div id="myChartTwoairExponentYear" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}" />
    </div>
    <div>
      <div id="myChartThreeairExponentYear" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}" />
    </div>
    <div>
      <div id="myChartFourairExponentYear" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}" />
    </div>

    <div>
      <div id="myChartFiveairExponentYear" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}" />
    </div>

    <div>
      <div id="myChartSixairExponentYear" :style="{width: '100%', height: '250px',backgroundColor:'#fff',marginTop:'30px'}" />
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { tableColor,titleColor ,buttonColor} from '@/filters/index'
import {
  fsiteOptionsByLevel,
  fsiteOptionsByFsiteNo,
  getListArea,
} from "@/api/area";

var urlStr = "";

export default {
  name: "Area",
  data() {
    return {
      buttonColor:buttonColor,
      year: new Date(),
      dataList: null,
      listQuery: {
        year: undefined,
        fsiteNo: undefined,
        fpointNo: undefined
      },
      provinceValue: null,
      cityOptions: null,
      cityValue: "",
      areaOptions: null,
      areaValue: "",
      schoolOptions: null,
      schoolValue: "",
      placeOptions: null,
      placeValue: "",
    };
  },
  computed: {
    yearMonth() {
      var date = new Date(this.year);
      var y = date.getFullYear();
      return y;
    },
  },
  created() {
    if(this.$store.state.user.fsiteLevel==0){
        // 获取省
      fsiteOptionsByLevel(0)
        .then((response) => {
          if (response.data.data.list.length > 0) {
            this.provinceValue = response.data.data.list[0].value;
            this.handleFilter();
          }
        })
        .catch(() => {
          this.provinceValue = null;
        });
      // 获取市
      fsiteOptionsByLevel(1)
        .then((response) => {
          this.cityOptions = response.data.data.list;
        })
        .catch(() => {
          this.cityOptions = [];
        });

    }else if(this.$store.state.user.fsiteLevel == 1){
      this.cityOptions = [{
        value:this.$store.state.user.fsiteNo,
        label:this.$store.state.user.fsiteName,
      }]
      this.cityValue = this.$store.state.user.fsiteNo
      this.cityChange(this.$store.state.user.fsiteNo)
      this.handleFilter();
    }else if(this.$store.state.user.fsiteLevel == 2){
      this.areaOptions = [{
        value:this.$store.state.user.fsiteNo,
        label:this.$store.state.user.fsiteName,
      }]
      this.areaValue = this.$store.state.user.fsiteNo
      this.areaChange(this.$store.state.user.fsiteNo)
      this.handleFilter();
    }else if(this.$store.state.user.fsiteLevel == 3){
      this.schoolOptions = [{
        value:this.$store.state.user.fsiteNo,
        label:this.$store.state.user.fsiteName,
      }]
      this.schoolValue = this.$store.state.user.fsiteNo
      this.schoolChange(this.$store.state.user.fsiteNo)
      this.handleFilter();
    }
  },
  methods: {
    // 市改变
    cityChange(data) {
      this.areaValue = "";
      this.schoolValue = "";
      this.placeValue = "";
      this.areaOptions = [];
      this.schoolOptions = [];
      this.placeOptions = [];
      if (data) {
        // 获取区
        fsiteOptionsByFsiteNo(data)
          .then((response) => {
            this.areaOptions = response.data.data.list;
          })
          .catch(() => {
            this.areaOptions = [];
          });
      }
    },

    //区改变
    areaChange(data) {
      this.schoolValue = "";
      this.placeValue = "";
      this.schoolOptions = [];
      this.placeOptions = [];
      if (data) {
        // 获取学校
        fsiteOptionsByFsiteNo(data)
          .then((response) => {
            this.schoolOptions = response.data.data.list;
          })
          .catch(() => {
            this.schoolOptions = [];
          });
      }
    },

    //学校改变
    schoolChange(data) {
      this.placeValue = "";
      this.placeOptions = [];
      if (data) {
        // 获取地点
        getListArea({flag:11,arg1:data})
          .then((response) => {
            this.placeOptions = response.data.data.list;
          })
          .catch(() => {
            this.placeOptions = [];
          });
      }
    },
    handleFilter: function () {
      this.listQuery.year = this.yearMonth;
      if (this.placeValue) {
        this.listQuery.fpointNo = this.placeValue;
      } else if (this.schoolValue) {
        this.listQuery.fsiteNo = this.schoolValue;
      } else if (this.areaValue) {
        this.listQuery.fsiteNo = this.areaValue;
      } else if (this.cityValue) {
        this.listQuery.fsiteNo = this.cityValue;
      } else {
        this.listQuery.fsiteNo = this.provinceValue;
      }

      if (this.placeValue) {
        urlStr = "/report/getYearExponentDataByFpointNo";
      } else {
        urlStr = "/report/getYearExponentData";
      }

      listAir(this.listQuery)
        .then((response) => {
          this.dataList = response.data.data.list;
          // this.showChart()
        })
        .catch(() => {
          this.dataList = [];
        }),
        listAirLine(this.listQuery)
          .then((response) => {
            const categories = response.data.data.list[0].map(function (item) {
              return item.fsiteNo;
            });
            const datas = [];
           const ftype1 = [];
            const ftype3 = [];
            const ftype2  = [];
           let fsiteName=''
            response.data.data.list[0].map((item) => {
              fsiteName=item.fsiteName
              ftype1.push(Number(item.ftype1).toFixed(1));
              ftype3.push(Number(item.ftype3).toFixed(1));
              ftype2 .push(Number(item.ftype2).toFixed(1));
            });

            datas.push({
              name: "今年",
              type: "line",
              data: ftype1,
             itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });
             datas.push({
              name: "同比",
              type: "line",
              data: ftype3,
              itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });
             datas.push({
              name: "环比",
              type: "line",
              data: ftype2 ,
              itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });


            this.showChart(categories, datas,fsiteName);

            // 图表pm10
            const categoriesTwo = []
            const datasTwo = [];
            const ftype1Two = [];
            const ftype2Two  = [];
            const ftype3Two = [];
            let fsiteNameTwo=''
            response.data.data.list[1].map((item) => {
              fsiteNameTwo=item.fsiteName
              categoriesTwo.push(item.fsiteNo)
              ftype1Two.push(Number(item.ftype1).toFixed(1));
              ftype2Two.push(Number(item.ftype2).toFixed(1));
              ftype3Two .push(Number(item.ftype3).toFixed(1));
            });

              datasTwo.push({
              name: "今年",
              type: "line",
              data: ftype1Two,
             itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });
            datasTwo.push({
              name: "同比",
              type: "line",
              data: ftype3Two ,
              itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });
            datasTwo.push({
              name: "环比",
              type: "line",
              data: ftype2Two,
              itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });

            this.showChartTwo(categoriesTwo, datasTwo,fsiteNameTwo);

            // 图表so2
            const categoriesThree = []
            const datasThree = [];
            const ftype1Three = [];
            const ftype2Three  = [];
            const ftype3Three = [];
            let fsiteNameThree=''
            response.data.data.list[2].map((item) => {
              fsiteNameThree=item.fsiteName
              categoriesThree.push(item.fsiteNo)
              ftype1Three.push(Number(item.ftype1).toFixed(1));
              ftype2Three.push(Number(item.ftype2).toFixed(1));
              ftype3Three .push(Number(item.ftype3).toFixed(1));
            });

              datasThree.push({
              name: "今年",
              type: "line",
              data: ftype1Three,
             itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });
            datasThree.push({
              name: "同比",
              type: "line",
              data: ftype3Three ,
              itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });
            datasThree.push({
              name: "环比",
              type: "line",
              data: ftype2Three,
              itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });

            this.showChartThree(categoriesThree, datasThree,fsiteNameThree);

            // 图表NO2
            const categoriesFour = []
            const datasFour = [];
            const ftype1Four = [];
            const ftype2Four  = [];
            const ftype3Four= [];
            let fsiteNameFour = []
            response.data.data.list[3].map((item) => {
              fsiteNameFour=item.fsiteName
              categoriesFour.push(item.fsiteNo)
              ftype1Four.push(Number(item.ftype1).toFixed(1));
              ftype2Four.push(Number(item.ftype2).toFixed(1));
              ftype3Four .push(Number(item.ftype3).toFixed(1));
            });

              datasFour.push({
              name: "今年",
              type: "line",
              data: ftype1Four,
             itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });
            datasFour.push({
              name: "同比",
              type: "line",
              data: ftype3Four ,
              itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });
            datasFour.push({
              name: "环比",
              type: "line",
              data: ftype2Four,
              itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });

            this.showChartFour(categoriesFour, datasFour,fsiteNameFour);

            // 图表co
            const categoriesFive = []
            const datasFive = [];
            const ftype1Five = [];
            const ftype2Five = [];
            const ftype3Five= [];
            let fsiteNameFive = []
            response.data.data.list[4].map((item) => {
              fsiteNameFive=item.fsiteName
              categoriesFive.push(item.fsiteNo)
              ftype1Five.push(Number(item.ftype1).toFixed(1));
              ftype2Five.push(Number(item.ftype2).toFixed(1));
              ftype3Five .push(Number(item.ftype3).toFixed(1));
            });

              datasFive.push({
              name: "今年",
              type: "line",
              data: ftype1Five,
             itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });
            datasFive.push({
              name: "同比",
              type: "line",
              data: ftype3Five ,
              itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });
            datasFive.push({
              name: "环比",
              type: "line",
              data: ftype2Five,
              itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });

            this.showChartFive(categoriesFive, datasFive,fsiteNameFive);

            // 图表o3
            const categoriesSix = []
            const datasSix = [];
            const ftype1Six = [];
            const ftype2Six = [];
            const ftype3Six= [];
            let fsiteNameSix = []
            response.data.data.list[5].map((item) => {
              fsiteNameSix=item.fsiteName
              categoriesSix.push(item.fsiteNo)
              ftype1Six.push(Number(item.ftype1).toFixed(1));
              ftype2Six.push(Number(item.ftype2).toFixed(1));
              ftype3Six .push(Number(item.ftype3).toFixed(1));
            });

              datasSix.push({
              name: "今年",
              type: "line",
              data: ftype1Six,
             itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });
            datasSix.push({
              name: "同比",
              type: "line",
              data: ftype3Six ,
              itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });
            datasSix.push({
              name: "环比",
              type: "line",
              data: ftype2Six,
              itemStyle : { normal: {label : {show: true}}},
            lineStyle: {
                normal: {
                      width:4
                }
            },
            });

            this.showChartSix(categoriesSix, datasSix,fsiteNameSix);
          })
          .catch(() => {
            this.categories = [];
            this.datas = [];
          });
    },
    showChart(categories, datas,fsiteName) {
      // 基于准备好的dom，初始化echarts实例
      const myChartairExponentYear = this.$echarts.init(document.getElementById("myChartairExponentYear"));
      // 绘制图表
      myChartairExponentYear.setOption({
        title: {
         text: fsiteName,
          left: "center",
          textStyle:{
      　　　　 fontSize:24
          }
        },
        color: ["#4472C5", "#ED7C30", "#80FF80", "#FF8096", "#800080"],
        legend: {
          data: ["今年", "同比", "环比"],
          top: "40%",
          left: "90%",
          textStyle: {
            //图例文字的样式
            fontSize: 18,
            fontWeight:'bold'
          },
          orient: "vertical",
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categories,
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datas,
        tooltip: {
          trigger: "axis",
        },
      });
    },

     showChartTwo(categoriesTwo, datasTwo,fsiteNameTwo) {
      // 基于准备好的dom，初始化echarts实例
      const myChartTwoairExponentYear = this.$echarts.init(document.getElementById("myChartTwoairExponentYear"));
      // 绘制图表
      myChartTwoairExponentYear.setOption({
        title: {
          text: fsiteNameTwo,
          left: "center",
          textStyle:{
      　　　　 fontSize:24
          }
        },
        color: ["#4472C5", "#ED7C30", "#80FF80", "#FF8096", "#800080"],
        legend: {
          data: ["今年", "同比", "环比"],
          top: "40%",
          left: "90%",
          textStyle: {
            //图例文字的样式
            fontSize: 18,
            fontWeight:'bold'
          },
          orient: "vertical",
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categoriesTwo,
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datasTwo,
        tooltip: {
          trigger: "axis",
        },
      });
    },

    showChartThree(categoriesThree, datasThree,fsiteNameThree) {
      // 基于准备好的dom，初始化echarts实例
      const myChartThreeairExponentYear= this.$echarts.init(document.getElementById("myChartThreeairExponentYear"));
      // 绘制图表
      myChartThreeairExponentYear.setOption({
        title: {
          text: fsiteNameThree,
          left: "center",
          textStyle:{
      　　　　 fontSize:24
          }
        },
        color: ["#4472C5", "#ED7C30", "#80FF80", "#FF8096", "#800080"],
        legend: {
          data: ["今年", "同比", "环比"],
          top: "40%",
          left: "90%",
          textStyle: {
            //图例文字的样式
            fontSize: 18,
            fontWeight:'bold'
          },
          orient: "vertical",
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categoriesThree,
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datasThree,
        tooltip: {
          trigger: "axis",
        },
      });
    },

    showChartFour(categoriesFour, datasFour,fsiteNameFour) {
      // 基于准备好的dom，初始化echarts实例
      const myChartFourairExponentYear= this.$echarts.init(document.getElementById("myChartFourairExponentYear"));
      // 绘制图表
      myChartFourairExponentYear.setOption({
        title: {
          text: fsiteNameFour,
          left: "center",
          textStyle:{
      　　　　 fontSize:24
          }
        },
        color: ["#4472C5", "#ED7C30", "#80FF80", "#FF8096", "#800080"],
        legend: {
          data: ["今年", "同比", "环比"],
          top: "40%",
          left: "90%",
          textStyle: {
            //图例文字的样式
            fontSize: 18,
            fontWeight:'bold'
          },
          orient: "vertical",
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categoriesFour,
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datasFour,
        tooltip: {
          trigger: "axis",
        },
      });
    },

    showChartFive(categoriesFive, datasFive,fsiteNamefive) {
      // 基于准备好的dom，初始化echarts实例
      const myChartFiveairExponentYear= this.$echarts.init(document.getElementById("myChartFiveairExponentYear"));
      // 绘制图表
      myChartFiveairExponentYear.setOption({
        title: {
          text: fsiteNamefive,
          left: "center",
          textStyle:{
      　　　　 fontSize:24
          }
        },
        color: ["#4472C5", "#ED7C30", "#80FF80", "#FF8096", "#800080"],
        legend: {
          data: ["今年", "同比", "环比"],
          top: "40%",
          left: "90%",
          textStyle: {
            //图例文字的样式
            fontSize: 18,
            fontWeight:'bold'
          },
          orient: "vertical",
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categoriesFive,
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datasFive,
        tooltip: {
          trigger: "axis",
        },
      });
    },

    showChartSix(categoriesSix, datasSix,fsiteNameSix) {
      // 基于准备好的dom，初始化echarts实例
      const myChartSixairExponentYear= this.$echarts.init(document.getElementById("myChartSixairExponentYear"));
      // 绘制图表
      myChartSixairExponentYear.setOption({
        title: {
          text: fsiteNameSix,
          left: "center",
          textStyle:{
      　　　　 fontSize:24
          }
        },
        color: ["#4472C5", "#ED7C30", "#80FF80", "#FF8096", "#800080"],
        legend: {
          data: ["今年", "同比", "环比"],
          top: "40%",
          left: "90%",
          textStyle: {
            //图例文字的样式
            fontSize: 18,
            fontWeight:'bold'
          },
          orient: "vertical",
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categoriesSix,
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datasSix,
        tooltip: {
          trigger: "axis",
        },
      });
    },

  },
};
export function listAir(query) {
  return request({
    url: urlStr,
    method: "get",
    params: query,
  });
}
export function listAirLine(query) {
  return request({
    url: "/report/getYearExponentChartData",
    method: "get",
    params: query,
  });
}
</script>

<style scoped>
.text1Title {
    width: 600px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
    border-top: 3px solid #409EFF;
    background-color: #fff !important;
  }

  .text2Title {
    width: 350px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
    border-top: 3px solid #409EFF;
    background-color: #fff !important;
  }
  .text1 {
    width: 600px;
    color: #000000;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
  }

  .text2 {
    width: 350px;
    color: #000000;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
  }
  .on {
    background: #fff;
  }

  .list {
    background-color:#ecf0f5 !important;
    padding-bottom: 30px;
    box-sizing: border-box;
    flex: 1;
    flex-direction: column;
    display: flex;
    padding-top: 10px;
    height: 30%;
    flex: 2;
    text-align: left;
  }
  .uni-row {
    flex-direction: row;
  }
  .uni-flex {
    display: flex;
    flex-direction: row;
  }
   div:hover{
    background-color: #f4f4f4;
  }
</style>
